<template>
	<div>
	  <el-card class="box-card">
		<div slot="header"
			 class="clearfix">
		  <span style="color: #000; font-weight: 600">存储配置</span>
		  <div style="margin-top: 10px">用于图片上传保存等场景</div>
		</div>
  
		<el-tabs v-model="activeName"
				 @tab-click="handleClick(activeName)">
		  <el-tab-pane label="本地存储"
					   name="1">
			<localStorage :data="localCurrent"
						  @done="init"
						  :tabSwitch="tabSwitch"></localStorage>
		  </el-tab-pane>
		  <el-tab-pane label="七牛云"
					   name="2">
			<qiniuyunOss :data="qnyCurrent"
						 @done="init"
						 :tabSwitch="tabSwitch"></qiniuyunOss>
		  </el-tab-pane>
		  <el-tab-pane label="阿里云oss"
					   name="3">
			<alibabaCloudOSS :data="alyCurrent"
							 @done="init"
							 :tabSwitch="tabSwitch"></alibabaCloudOSS>
		  </el-tab-pane>
  
		</el-tabs>
	  </el-card>
	</div>
  </template>
	
	<script>
  import alibabaCloudOSS from './components/alibabaCloudOSS.vue';
  import localStorage from './components/localStorage.vue'
  import qiniuyunOss from './components/qiniuyunOss.vue';
  import { config } from '@/api/config/index'
  
  export default {
	components: { alibabaCloudOSS, qiniuyunOss, localStorage },
	data () {
	  return {
		activeName: '2',
		tabSwitch: '2',
		localCurrent: null,
		alyCurrent: null,
		qnyCurrent: null,
		txyCurrent: null
	  };
	},
	created () {
	  this.init();
	  this.tabIndex()
	},
	methods: {
	  tabIndex () {
  
	  },
	  handleClick (tab) {
		console.log(tab);
		this.tabSwitch = tab;
		this.init(true);
	  },
	  init (val) {
		config({
		  // id: this.$store.state.user.info.userId
		})
		  .then((res) => {
			console.log(res);
			if ((!val)) {
			  this.tabSwitch = res.data.upload_way;
			  this.activeName = res.data.upload_way;
			}
			if (this.tabSwitch == '1') {
			  this.localCurrent = res.data;
			} else if (this.tabSwitch == '2') {
			  this.qnyCurrent = res.data;
  
			} else if (this.tabSwitch == '3') {
			  this.alyCurrent = res.data;
			} else {
			  this.txyCurrent = res.data;
			}
		  })
		  .catch((e) => {
			this.$message.error(e);
		  });
	  }
	}
  };
	</script>
	
	<style lang="less" scoped></style>
	